<template>
  <div class="container bg-gray">
    <div class="topbar">
      <div class="topbar-inner flex">
          <div class="line1 line1-blue"></div>
          <div class="line2"></div>
        <div class="step-block">
          <div class="step-icon bg-green">
            <img src="../../assets/imgs/other/refund_apply@2x.png" alt="" class="refund_apply">
          </div>
          <div class="step-title">
            退款申请
          </div>
          <div class="step-desc">
            2018.5.22 14:20
          </div>
        </div>
        <div class="step-block">
          <div class="step-icon bg-red">
            <img src="../../assets/imgs/other/provider_accept@2x.png" alt="" class="provider_accept"> 
          </div>
          <div class="step-title">
            卖家受理
          </div>
          <div class="step-desc">
            2018.5.22 14:20
          </div>
        </div>
        <div class="step-block">
          <div class="step-icon">
            <img src="../../assets/imgs/other/rufund_success@2x.png" alt="" class="rufund_success">
          </div>
          <div class="step-title">
            退款成功
          </div>
          <div class="step-desc">
            2018.5.22 14:20
          </div>
        </div>
      </div>
    </div>
    <div class="p30 title2 fz28 txt222 border-b bg-white">
        退款信息
    </div>
    <div class="p30 bg-white">
        <div class="flex">
            <xd-img :src="'12'" class="goods-cover"></xd-img>
            <div class="flex-con goods-desc">
                零度行车记录仪
            </div>
        </div>
        <div class="refund-info">
            <div>
                <span>退款原因：</span> 不喜欢
            </div>
            <div>
                <span>退款金额：</span> ￥100
            </div>
            <div>
                <span>退还积分：</span> 50
            </div>
        </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.title2 {
  margin-top: 0.4rem;
}
.topbar {
  background-color: white;
  padding: 0.5333rem 0;
  .step-title {
    font-size: 0.32rem;
    color: #222222;
    padding-top: 0.2667rem;
  }
  .step-desc {
    font-size: 0.2667rem;
    padding-top: 0.1333rem;
    color: #bbbbbb;
  }
  .topbar-inner {
    justify-content: space-between;
    text-align: center;
    position: relative;
    width: 9.2rem;
    margin: 0 auto;
  }
  .step-icon {
    display: block;
    margin: 0 auto;
    text-align: center;
    z-index: 100;
    position: relative;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #cccccc;
    border-radius: 50%;
  }

  .bg-red {
    background-color: #ff2a2a;
  }
  .bg-green {
    background-color: #008d3e;
  }
}
.refund_apply {
  margin: 0 auto;
  position: relative;
  top: 0.19rem;
  width: 0.4rem;
  display: block;
  height: 0.4133rem;
}
.provider_accept {
  width: 0.4267rem;
  height: 0.4533rem;
  margin: 0 auto;
  position: relative;
  top: 0.19rem;
  display: block;
}
.rufund_success {
  width: 0.4533rem;
  height: 0.32rem;
  margin: 0 auto;
  position: relative;
  top: 0.26rem;
  display: block;
}
.line1 {
  position: absolute;
  left: 1.4933rem;
  top: 0.4267rem;
  width: 2.6133rem;
  background-color: #008d3e;

  height: 0.0533rem;
}
.line2 {
  position: absolute;
  left: 5.1067rem;
  top: 0.4267rem;
  width: 2.6133rem;

  background-color: #cccc;
  height: 0.0533rem;
}
.goods-cover{
    width: 2.64rem;
	height: 1.6933rem;
}
.goods-desc{
    	font-size: 0.3467rem;
	color: #17402a;
	line-height: 0.9333rem;
    padding-left: 0.3333rem;
}
.refund-info{
    padding-top: 0.4rem;
    	font-size: 0.3467rem;
        	color: #222222;

	line-height: 0.72rem;
    span{
        	color: #999999;
    }

}
</style>
